<template>
    <div>
        <XSearch :fields='filter' @search='search'>
            <template #default>
                <slot name='search'></slot>
            </template>
        </XSearch>
    </div>
    <div class='m-t-30'>
        <template v-if='slots.toolBar'>
            <div :class='$style.toolBar'>
                <slot name='toolBar'></slot>
            </div>
        </template>
        <XPagination ref='paginationRef' :queryParams='queryParams' :api='props.api' @finish='finishPage'>
            <el-table border @selection-change='handleSelectionChange' :data='rowsData' class='w-100'>
                <template v-if='props.selection'>
                    <el-table-column align='center' type='selection' width='40' />
                </template>
                <template v-for='column in columns' :key='column.dataIndex'>
                    <el-table-column align='center' :prop='column.dataIndex' :label='column.title' :formatter='column.formatter'>
                        <template v-if='!column.formatter' #default='{row, $index}'>
                            <template v-if='slots[column.dataIndex]'>
                                <slot :name='column.dataIndex' :row='row' :value='row[column.dataIndex]'></slot>
                            </template>
                            <template v-else>{{row[column.dataIndex]}}</template>
                        </template>
                    </el-table-column>
                </template>
                <el-table-column v-if='slots.action' align='center' label='操作'>
                    <template #default='{row}'>
                        <slot name='action' :row='row'></slot>
                    </template>
                </el-table-column>
                <slot></slot>
            </el-table>
        </XPagination>
    </div>
</template>

<script lang='ts' setup>
    import { computed, nextTick, reactive, ref, useSlots } from "vue"
    import { Column } from "../type"
    const props = defineProps<{
        columns : Column[],
        api : Function,
        selection? : boolean,
    }>()

    const emit = defineEmits<{
        (e : 'selectionChange', rows:any[]) : void
    }>()

    const slots = useSlots()

    const filter = reactive<any[]>([])
    const columns = reactive<any[]>([])

    const queryParams = ref<any>({})
    const paginationRef = ref()
    const rowsData = reactive([])
    
    props.columns.forEach(column => {
        if(column.inFilter) { //构建筛选
            let item:Filter = {}
            if(column.filter) {
                item = Object.assign(item, column.filter)
            }

            if(!item.type) {
                item.type = 'text'
            }
            if(!item.label) {
                item.label = column.title
            }
            if(!item.name) {
                item.name = column.dataIndex
            }

            filter.push(item)
        }


        if(!column.hideInTable) {
            columns.push({
                title : column.title,
                dataIndex : column.dataIndex,
                formatter : column.formatter
            })
        }

    })

    function search(params) {
        queryParams.value = params
        nextTick(() => {
            paginationRef.value.load()
        })
        
    }

    function finishPage(rows) {
        rowsData.splice(0)
        rowsData.push(...rows) 
    }

    function handleSelectionChange(rows) {
        emit('selectionChange', rows)
    }


    defineExpose({
        load() {
            paginationRef.value.load()
        }
    })

</script>

<style scoped lang='scss' module>
    .toolBar{
        display: flex;
        margin-bottom: 10px;
        gap: 15px;
        //justify-content:flex-end;
    }
</style>